<template>
  <div class="login">
    <div class="content">
      <div class="left">
        <div>
          <div class="logo">空间装备作战推演与实验评估系统</div>
          <div class="name">登录</div>
          <el-form ref="ruleFormRef" :rules="rules" :model="form">
            <el-form-item prop="userName" class="inputBox">
              <div class="title">账号名称</div>
              <el-input v-model="form.userName" />
              <i class="iconfont icon-yonghu"></i>
            </el-form-item>

            <el-form-item prop="password" class="inputBox">
              <div class="title">账号密码</div>
              <el-input
                v-model="form.password"
                :type="eyes ? 'password' : 'text'"
              />

              <i
                class="iconfont yj"
                :class="eyes ? 'icon-tianchongxing- i' : 'icon-mimakai'"
              ></i>
              <i
                class="iconfont eyes"
                :class="eyes ? 'icon-biyan' : 'icon-zhengyan'"
                @click="eyes = !eyes"
              ></i>
            </el-form-item>
          </el-form>
          <el-button
            class="login-btn"
            type="primary"
            :loading="loading"
            @click="login(ruleFormRef)"
            >登录</el-button
          >
        </div>
      </div>
      <div class="right">
        <img
          class="satellite"
          src="@/assets/imgs/login/u1950.png"
          alt=""
          width="300"
          height="300"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, inject, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { loginAPI } from "@/api/login";
import { ElMessage, ElMessageBox } from "element-plus";
const router = useRouter();
const store = useStore();
const form = ref({
  userName: "admin",
  password: "123456",
});
const rules = {
  userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
};
// logout
const ruleFormRef = ref(null);
const eyes = ref(true);
const loading = ref(false);
const login = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      try {
        loading.value = true;
        let res = await loginAPI(form.value);
        console.log(res);

        loading.value = false;
        if (res.code == 200) {
          store.commit("login/LOGIN", res.token);
          sessionStorage.setItem("userName", res.userName);
          sessionStorage.setItem("name", res.name);
          
        //   router.replace("/home");
          router.replace("/");
          ElMessage({
            showClose: true,
            message: res.msg,
            type: "success",
          });
          formEl.resetFields();
        } else {
          ElMessage({
            showClose: true,
            message: res.msg,
            type: "error",
          });
        }
      } catch (error) {
        console.log(error);
      }
    } else {
      console.log("error submit!", fields);
      setTimeout(() => {
        loading.value = false;
      }, 200);
    }
  });
  setTimeout(() => {
    loading.value = false;
  }, 200);
};
onMounted(() => {});
</script>
<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  // background: url(@/assets/imgs/login/u1916.png) no-repeat;
  background: #000;
  background-size: 100% 100%;
  color: #fff;

  .content {
    width: 100%;
    height: 100%;
    display: flex;
    .left {
      width: 50%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .logo {
        font-size: 34px;
        margin-bottom: 100px;
      }
      .name {
        width: 60px;
        text-align: center;
        font-size: 30px;
        color: #169bd5;
        font-weight: bold;
        border-bottom: 5px solid #169bd5;
      }

      .inputBox {
        width: 400px;
        position: relative;
        .title {
          color: #5f6269;
        }
        .iconfont {
          font-size: 20px;
        }
        .icon-yonghu,
        .yj {
          position: absolute;
          top: 50%;
          left: -5px;
        }
        .eyes {
          position: absolute;
          right: 0;
          top: 50%;
        }
      }
      .login-btn {
        width: 200px;
      }
    }
    .right {
      height: 100%;
      width: 50%;
      background: url(@/assets/imgs/login/u1916.png) no-repeat;
      background-size: 100% 100%;
      position: relative;
      .satellite {
        position: absolute;
        top: 150px;
        right: 0;
      }
    }
  }
}
:deep() {
  .el-form-item.is-error .el-input__wrapper {
    box-shadow: none !important;
  }
  .el-input__wrapper {
    background: transparent;
    border: none;
    box-shadow: none;
    border-bottom: 2px solid #ffffff;
    border-radius: 0;
    padding-left: 20px;
    width: 100px;
    .el-input__inner {
      color: #fff;
    }
  }
}
</style>
